import { FC, memo, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Button } from 'antd'
import styled from 'styled-components'

const ContentBox = styled.div`
    padding: 10px;
    border: 1px solid red;
`

const Layout02: FC<any> = ({ children }) => {
    useEffect(() => {
        console.log('layout02 mounted')
    }, [])

    return (
        <div>
            <h2>Layout02</h2>
            <ContentBox>{children}</ContentBox>
            <div>
                <Link to="/layout01/a">
                    <Button>layout01</Button>
                </Link>
            </div>
        </div>
    )
}

const D: FC = memo(() => {
    return (
        <Link to="/layout02/e">
            <Button>D组件</Button>
        </Link>
    )
})

const E: FC = memo(() => {
    return (
        <Link to="/layout02/f">
            <Button>E组件</Button>
        </Link>
    )
})

const F: FC = memo(() => {
    return (
        <Link to="/layout02/d">
            <Button>F组件</Button>
        </Link>
    )
})

export { D, E, F }

export default memo(Layout02)
